<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
	layout:decorator="option/base_page">
<head>
	<meta charset="UTF-8" />
	<title>无线微功耗气体检测报警系统</title>
	<link rel="stylesheet" th:href="@{/lib/bootstrap-table/bootstrap-table.min.css}">
	<link rel="stylesheet" th:href="@{/lib/bootstrapvalidator/css/bootstrapValidator.css}">
	
	<script th:src="@{/lib/bootstrap-table/bootstrap-table.min.js}"></script>
	<script th:src="@{/lib/bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>
	<script th:src="@{/lib/bootstrapvalidator/js/bootstrapValidator.js}"></script>
	<script th:src="@{/lib/ajaxfileupload.js}"></script>
	<script type="text/javascript" th:src="@{/js/datepicker/WdatePicker.js}"></script>
</head>
<body layout:fragment="option-main">
	<h3>设备维保信息管理</h3>
	<div id="device-register-table-toolbar">
		<div class="pull-left col-lg-3 input-group">
		      <input type="text" class="form-control" id="inputkeyword" placeholder="请输入关键字">
		      <span class="input-group-btn">
		        <button id="search-button" class="btn btn-default" type="button" >查询</button>
		      </span>
		 </div>
		<!-- <button id="option-device-add-button" class="btn btn-default" type="button" data-toggle="modal"  data-target="#deviceModal">新增</button> -->
		<div class="pull-right">
			<button id="option-device-down-button" class="btn btn-default" type="button" onclick= "deviceDownLoad()">下载EXCEL</button>
		</div>
	</div>
	<table id="option-device-table" data-toolbar="#device-register-table-toolbar"></table>
	<script th:inline="javascript">
		function deviceDownLoad(){
			var params = {
				searchContent: $("#inputkeyword").val(),//按条件搜索
			};
			window.open("/option/device/downLoadDeviceEXL?param="+encodeURI(JSON.stringify(params)));
		}
		$(document).ready(function(){
			$(window).resize(function() {
			    $('#option-device-table').bootstrapTable('resetView', {
			        height: $(window).height() - 100
			    });
			});
			//查询
			$("#search-button").click(function () {
		        $('#option-device-table').bootstrapTable(('refresh')); // 很重要的一步，刷新url！
		    });
			$("#maintenanceDate").blur(function () {
			    $('#deviceForm').data('bootstrapValidator')
			        .updateStatus('maintenanceDate', 'NOT_VALIDATED',null)
			        .validateField('maintenanceDate');
			});
			$('#deviceForm').bootstrapValidator({
　　　　　　　　message: 'This value is not valid',
            　		  feedbackIcons: {
                　　　　　　　　valid: 'glyphicon glyphicon-ok',
                　　　　　　　　invalid: 'glyphicon glyphicon-remove',
                　　　　　　　　validating: 'glyphicon glyphicon-refresh'
            　　　　　 },
	            fields: {
	            	equNo: {
	                    validators: {
	                        notEmpty: {
	                            message: '设备编号不能为空'
	                        },
	                        stringLength: {/*长度提示*/
	                            min: 1,
	                            max: 50,
	                            message: '名称长度必须在1到50之间'
	                        }
	                    }
	                },
	                equType: {
	                    validators: {
	                        notEmpty: {
	                            message: '设备类型不能为空'
	                        }
	                    }
	                },
	                maintenanceDate: {
	                    validators: {
	                        notEmpty: {
	                            message: '维保日期不能为空'
	                        }
	                    }
	                },
	                maintenanceUnit: {
	                    validators: {
	                        stringLength: {/*长度提示*/
	                            min: 1,
	                            max: 100,
	                            message: '维保单位长度必须在1到100之间'
	                        }
	                    }
	                },
	                contacts: {
	                    validators: {
	                        stringLength: {/*长度提示*/
	                            min: 1,
	                            max: 50,
	                            message: '联系人长度必须在1到50之间'
	                        }
	                    }
	                },
	                contactPhone: {
	                    validators: {
	                        stringLength: {/*长度提示*/
	                            min: 1,
	                            max: 50,
	                            message: '联系电话长度必须在1到50之间'
	                        }
	                    }
	                },
	                remarks: {
	                    validators: {
	                        stringLength: {/*长度提示*/
	                            min: 1,
	                            max: 255,
	                            message: '备注长度必须在1到255之间'
	                        }
	                    }
	                },
	                
	            }
	        });
			$('body').on('hidden.bs.modal', '.modal', function () {//监听model关闭
			    //$(this).removeData('bs.modal');
			    $("input[name='oid']").val("");
				$("input[name='equNo']").val("");
				$("input[name='equType']").val("");
				$("input[name='maintenanceDate']").val("");
				$("input[name='productionDate']").val("");
				$("input[name='maintenanceUnit']").val("");
				$("input[name='contacts']").val("");
				$("input[name='contactPhone']").val("");
				$("input[name='remarks']").val("");
				queryTableData();
			});
			$('#closeButton').click(function() {
		        $('#deviceForm').data('bootstrapValidator').resetForm(true);
		    });
			$('#option-device-table').bootstrapTable({
				height: $(window).height() - 100,
				url : "/option/device/list",
				method: 'get',
				pagination : true,
				pageNumber : 1, //初始化加载第一页
				pageSize : 10,//单页记录数
				pageList : [10, 20, 50,100],
				sidePagination : 'server',
				queryParamsType:'',
				queryParams : function(params) {
					return {
                        pageSize : params.pageSize,
                        pageNumber : params.pageNumber,
                        searchContent: $("#inputkeyword").val(),//按条件搜索	
					};
				},
				dataType : "json",
				uniqueId : "oid", // 每一行的唯一标识，一般为主键列
				cardView : false, // 是否显示详细视图
				detailView : false, // 是否显示父子表
				resizable : false,
				search : false,
				showRefresh : false,
				showToggle : false,
				showColumns : false,
				//toolbar: '#toolbar',    //工具按钮用哪个容器
				cache: false, 
				columns:[
					{
	                    field:"oid",
	                    title:"oid",
	                    visible: false

	                },
					{
						title : '序号',
						field : 'id',
						align: 'center',
						valign : 'center',
						width : 100,
						formatter : function(value, row, index) {
							return index + 1;
						}
			 
					},
					{
						title : '编号',
						field : 'equNo',
						align : 'center',
						valign : 'center',
						width : 150
			 
					},
					{
						title : '设备类型',
						field : 'equType',
						align : 'center',
						valign : 'center',
						width : 100
					},
					{
						title : '维保日期',
						field : 'maintenanceDate',
						align : 'center',
						valign : 'center',
						width : 150,
						/* formatter: function (value, row, index) {
		                    return dateFormatter(value)
		                } */
					},
					{
						title : '生产日期',
						field : 'productionDate',
						align : 'center',
						valign : 'center',
						width : 150,
						/* formatter: function (value, row, index) {
		                    return dateFormatter(value)
		                } */
					},
					{
						title : '维保单位',
						field : 'maintenanceUnit',
						align : 'center',
						valign : 'center',
						width : 200
					},
					{
						title : '联系人',
						field : 'contacts',
						align : 'center',
						valign : 'center',
						width : 150
					},
					{
						title : '联系电话',
						field : 'contactPhone',
						align : 'center',
						valign : 'center',
						width : 150
					},
					{
						title : '备注',
						field : 'remarks',
						align : 'center',
						valign : 'center',
						width : 200
					},
					{
						title : '状态',
						field : 'state',
						align : 'center',
						valign : 'center',
						width : 200
					},
					/* {
						field : 'operate',
						title : '操作',
						width : 200,
						align : 'center',
						valign : 'center',
						formatter:function(value, row, index) {
						    return [
						        "<a name='option-device-table-modfiy' onclick=\"getDeviceModelData('" + row.oid + "')\">修改</a>",
						        "<a name='option-device-table-delete' onclick=\"deviceDeleteById('" + row.oid + "')\" >删除</a>"
						    ].join('');
						}
					} */
				]
			});
			$('#option-device-table').bootstrapTable('hideLoading');
		});

		//刷新table
		function queryTableData() {
		   // 不带参数，只刷新（重新加载数据）
		   $("#option-device-table").bootstrapTable('refresh');
		}
		
		//给Model获取值
		function getDeviceModelData(id) {
		    $.ajax({
		        type : 'post',
		        url : '/option/device/qryById/'+id,
		        dataType:'json',
		        success : function(result) {
		        	$("input[name='oid']").val(result.oid);
					$("input[name='equNo']").val(result.equNo);
					$("select[name='equType']").val(result.equType);
					$("input[name='maintenanceDate']").val(result.maintenanceDate);
					$("input[name='productionDate']").val(result.productionDate);
					$("input[name='maintenanceUnit']").val(result.maintenanceUnit);
					$("input[name='contacts']").val(result.contacts);
					$("input[name='contactPhone']").val(result.contactPhone);
					$("input[name='remarks']").val(result.remarks);
					$('#deviceModal').modal('show');
		        }
		    })
		};
		
		//保存
		function deviceSaveFn(){
			var bootstrapValidator = $("#deviceForm").data("bootstrapValidator");
			bootstrapValidator.validate();
			if(bootstrapValidator.isValid()){
				var data = {};
			    var dataArray = $('#deviceForm').serializeArray();
			    if(dataArray.length>0){
			        for(i=0;i<dataArray.length;i++){
			            var input = dataArray[i];
			            var ele = $("input[name='"+input.name+"']");
			            if(ele.prop("disabled")!=true){
			                data[input.name] = input.value;
			            }
			        }
			    }
			    console.log(JSON.stringify(data));
			    $.ajax({
			        type : 'post',
			        url : '/option/device/save',
			        dataType:'json',
			        data: JSON.stringify(data),
			        headers: {"Content-Type": "application/json;charset=utf-8"},
			        success : function(result) {
			            console.info(result);
			            $('#deviceForm').data('bootstrapValidator').resetForm(true);
			            $('#deviceModal').modal('hide');
			        }
			    })
			}
		};
		
		//删除
		function deviceDeleteById(id) {
		    $.ajax({
		        type : 'post',
		        url : '/option/device/del/'+id,
		        dataType:'json',
		        success : function(result) {
					$('#deviceModal').modal('hide');
					queryTableData();
		        }
		    })
		};
		
		function dateFormatter(value) {
	        if(value=='' ||value==undefined){
	            return value;
	        }
	        var myDate = new Date(value);
	        //获取当前年
	        var year=myDate.getFullYear();
	        //获取当前月
	        var month=myDate.getMonth()+1;
	        month = month < 10 ? "0"+month : month;
	        //获取当前日
	        var date=myDate.getDate();
	        date = date < 10 ? "0"+date : date;
	        var h=myDate.getHours();       //获取当前小时数(0-23)
	        h = h < 10 ? "0"+h : h;
	        var m=myDate.getMinutes();     //获取当前分钟数(0-59)
	        m = m < 10 ? "0"+m : m;
	        var s=myDate.getSeconds();
	        s = s < 10 ? "0"+s : s;
	        var time =year+'-'+month+"-"+date;
	        return time;
	    }		
	</script>
	<!-- Modal add start -->
	<form  id="deviceForm" class="form-horizontal">
	<div class="modal fade" id="deviceModal" tabindex="-1" role="dialog" aria-labelledby="deviceModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="deviceModalLabel">
                	新增安防物资
                </h4>
            </div>
            <div class="modal-body">
            	<div class="form-group" style="display:none;">
                    <label class="control-label col-xs-3">oid:</label>
                    <div class="col-xs-8">
                        <input type="text" name="oid" id="oid" value="" class="form-control">
                	</div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3">设备编号:</label>
                    <div class="col-xs-8">
                        <input type="text" name="equNo"  placeholder="请输入名称" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3">设备类型:</label>
                    <div class="col-xs-8">
                        <select class="form-control" name="equType">
                             <option value="JH20">JH20</option>
                             <option value="JH81">JH81</option>
                         </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3">维保日期:</label>
                    <div class='col-xs-8' >
		                <input class="form-control" type="text" id="maintenanceDate" name="maintenanceDate" onFocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd'})">
		            </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3">生产日期:</label>
                    <div class='col-xs-8'>
		                <input class="form-control" type="text" id="productionDate" name="productionDate" onFocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd'})">
		            </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3">维保单位:</label>
                    <div class="col-xs-8">
                        <input type="text"  name="maintenanceUnit" placeholder="请输入维保单位" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3">联系人:</label>
                    <div class="col-xs-8">
                        <input type="text"  name="contacts" placeholder="请输入联系人" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3">联系电话:</label>
                    <div class="col-xs-8">
                        <input type="text"  name="contactPhone" placeholder="请输入联系电话" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3">备注:</label>
                    <div class="col-xs-8">
                        <input type="text"  name="remarks" placeholder="请输入备注" class="form-control">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="closeButton" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="deviceSaveFn();">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

</form>
<!---Model end -->

</body>
</html>